<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/x-icon" href="../image/pic.ico">
        <link rel="stylesheet" href="../css/reset.css">
        <link rel="stylesheet" href="../html/header.html">
        <link rel="stylesheet" href="../html/footer.html">
        <link rel="stylesheet" href="../css/detail.css">
        <title>详情页</title> 
        
        <style>
            iframe{
                display: block;
                width: 100%;
                height: 183px;
            }
            .all{height: 500px;width: 1090px;margin:0 auto;position: relative;}
            .long{height: 400px;width:400px; position: relative;}
            #small{width: 400px;height: 400px;position: absolute;left: 0px;top: 0px;}
            #small img{width: 100%;height: 100%;}
            .zhezhao{height: 200px;width: 200px;background-color:royalblue; opacity: 0.5;position: absolute;top: 0;left: 0; display: none;}
            #big{width: 400px;height: 400px;border: 1px solid #e3e3e3;overflow: hidden; left:442px;position: absolute;display: none;z-index: 100;}
            #big img{width: 800px;height: 800px;position: absolute;}

            .product-title{
                font-weight: 600;
                font-size: 18px;
                line-height: 26px;
            }
            .m-price-wrap {    
                background-color: #f9f9f9;
                margin-bottom: 12px;
                width: 100%;
                height: 156px;
            }
            .PInfo{position: absolute;left: 446px;width: 645px;height: 500px;}
            dd{margin-top: 16px;}
            .count{text-align: center; width: 120px;border: 1px solid #888;display: flex;justify-content: space-around;}
            .jian, .jia{display: block;width: 25px;text-align: center;cursor: pointer;}
            i{font-size: 12px;color: #999;display: inline-block;width: 100px;text-align: center;}
            .jiajiagou{font-size: 12px;color: rgb(188,0,0);}
            .imports{width: 160px;height: 50px;font-size: 18px;font-weight: 600;cursor: pointer;margin: 19px 0 20px 0; color: #e42542;background-color: rgb(241, 225, 225); border: 2px solid #e42542;text-align:center;line-height:50px;}
            .importc{width: 180px;height: 50px;font-size: 18px;font-weight: 600;cursor: pointer;margin: 20px 0 19px 20px; color: #fff; background-color: #e42542;text-align:center;line-height:50px;}

        </style>
    </head>
    <body>
        <iframe src="header.html" frameborder="0" scrolling="no"></iframe>
        <div class="all">
            <div class="long l">
                <div id="small">
                    <img src="../image/details1.jpg" alt="">
                    <p class="zhezhao"></p>
                </div>
                <div id="big">
                    <img src="../image/details1.jpg" alt="">
                </div>
            </div>
           
            <dl class="PInfo">
                <dt class="orig-country"> </dt>
                <dd class="product-title">【补水"神器"】EAORON&nbsp;水光针胶原蛋白&nbsp;小分子玻尿酸&nbsp;保湿补水面膜&nbsp;25ml*5片</dd> 
                <dd class="subTit">【新老包装随机发货】</dd>
                <dd class="m-price-wrap">
                    <div class="m-price">
                        <i class="same">售价</i>
                        <span class="shoujia">92</span>       
                        <span class="参考价"><span>&emsp;<span>119.00</span>        
                    </div>
                </dd>
                <dd>
                    <i>活动</i><span class="jiajiagou">加购物车，即可低价换购热销商品</span>
                </dd>
                <dd>
                    <i>税费</i><span class="jiajiagou">售价已包含税费，无需另付税费</span>
                </dd>
                <dd>
                    <i class="l">数量</i>
                    <p class="count l">
                        <span class="jian">-</span>
                        <span class="jiliang">0</span>
                        <span class="jia">+</span>
                    </p>
                    <span class="jiajiagou">单次限购4件</span>
                </dd>
                <dd>
                    <p class="imports l">立即购买</p>
                    <p class="importc l">加入购物车</p>
                </dd>
            </dl>
        </div>
        <iframe src="footer.html" frameborder="0" scrolling="no"></iframe>
        <script src="../js/jquery.min.js"></script>
        <script>
            var ad = location.href.split("=")[1];
            var sd = Number(ad.slice(7,-4));  //截取到地址栏的图像所带数字
           

            //跳转详情页后图片的改变
            $("#small img").attr("src",`../image/${ad}`)
            $("#big img").attr("src",`../image/${ad}`)

            var osmall = document.getElementById("small");
            var obig = document.getElementById("big");
            var op = document.getElementsByClassName("zhezhao")[0];
            var omig = obig.querySelectorAll("#big img")[0];

            //放大镜
            osmall.onmouseover = function(){
                op.style.display = "block";
                obig.style.display = "block";
            }
            osmall.onmouseout = function(){
                op.style.display = "none";
                obig.style.display = "none";
            }
            osmall.onmousemove = function(event){
            var event = window.event;
                var l = event.clientX - osmall.offsetLeft - 182 - (op.offsetWidth) / 2 ;
                var t = event.clientY -  osmall.offsetTop - 152 - (op.offsetWidth) / 2;

                if(l<=0){
                    l = 0;
                }
                if(l>=200){
                    l = 200;
                }
                if(t<=0){
                    t = 0;
                }
                if(t>=200){
                    t = 200;
                }
                op.style.left = l + "px";
                op.style.top = t + "px"; 

                omig.style.left = l * (-2) + "px";
                omig.style.top = t * (-2) + "px";   
        }
        
            //数量变化
            let sum = 0;
            function subtotal(){
                $(".jiliang").html(sum)
                //小计
                $(".xiaoji").html(Number($(".jiliang").html())*Number($(".cost").html()))    
                $(".bott p:nth-child(2) span").html(sum)
                $(".bott p:nth-child(1) span").html($(".xiaoji").html())
            }   
            $(".count .jia").click(function(){
                if(sum >= 4){
                    sum = 4;
                    return
                }
                sum++
                subtotal();
            })
            $(".count .jian").click(function(){
                if(sum===0){
                    return
                }
                sum--
                subtotal()
            })
            
            //发送请求获取单价 介绍
            $.ajax({
                url:`http://127.0.0.1:82/detail?sd=${sd}`,
                success(data){
                    data = JSON.parse(data)
                    console.log(data[0])
                    $(".product-title").html(data[0].introduce)
                    $(".shoujia").html(data[0].pirce)
                }
            })
            //购物车跳转
            $(".importc").click(function(){
                location.href = `http://127.0.0.1:82/html/shopping.html?sd=${sd}`
            })
            //立即购买跳转订单页
            $(".imports").click(function(){
                location.href = `http://127.0.0.1:82/html/order.html?sd=${sd}`
            })
        </script>
    </body>
</html>
<!-- 
    项目总结：从地址栏获取地址  再用location.href.split("分割符")来截取成数组
 -->